<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--第03课 1:42:04-->
    <body>
        <div id="app">
            <input type="text" v-model="msg"/>
            <h3>{{msg}}</h3>
            <button @click=stus[0].name="rose">改变</button>
            <h4>{{stus[0].name}}</h4>
        </div>
        <script type="text/javascript" src="./vue.js"></script>
        <script type="text/javascript">
            //总结一句话：watch监听的是单个属性
            //基本数据类型 简单监视
            //复杂数据类型 深度监视
            new Vue({
                data() {
                    return {
                        msg: '',
                        stus: [{name: 'jack'}]
                    }
                },
                watch: {
                    msg: function (newV, oldV) {
                        console.log(newV, oldV);
                        if (newV === 'hujian') {
                            console.log("hujian来了");
                        }
                    },
                    //此处监听的是数组的地址 stus:function(newV,oldV){
                    //监听复杂数据类型 Object array,深度监视
                    stus: {
                        deep:true,
                        handler:function (newV, oldV) {
                            console.log(newV[0].name);
                        }
                    }
                },
                el: "#app",
            })
        </script>
    </body>
</html>